<template>
  <a-breadcrumb class="a-breadcrumb">
    <a-breadcrumb-item class="a-breadcrumb-item" v-for="(item, index) in breadcrumbItems" :key="index">
      <router-link style="padding: 1.5vh 2vw;" :to="item.path" :class="{ 'middle-breadcrumb': index === 1 }">
        {{item.breadcrumbName }}
        <a-icon type="close"  />
      </router-link>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
import { Icon } from 'ant-design-vue';
// import { color } from 'html2canvas/dist/types/css/types/color';
export default {
  name: 'Breadcrumb',
  data() {
    return {
      breadcrumbItems: [],
    };
  },
  watch: {
    '$route.path': function () {
      // 根据当前路由更新面包屑项
      this.breadcrumbItems = this.getBreadcrumbItems(this.$route);
    },
  },
  created() {
    // 初始化面包屑项
    this.breadcrumbItems = this.getBreadcrumbItems(this.$route);
  },
  methods: {
    getBreadcrumbItems(route) {
      // 根据路由信息生成面包屑项
      // 这里只是一个示例，你需要根据你的实际路由配置进行修改
      const routes = [
        { path: '/', breadcrumbName: '首页' },
        { path: '/', breadcrumbName: '总账' },
        { path: '/', breadcrumbName: '明细账' },
      ];

      // 去掉路径中的斜杠
      routes.forEach(route => {
        route.path = route.path.replace(/\//g, '');
      });

      return routes;
    },
  },
  components: {
    'a-icon': Icon,
  }
};
</script>

<style>
* {
  color: black;
  background-color: white;
}
/* 在你的组件样式中添加以下代码 */
.anticon {
  background-color: rgba(0,0,0,0); /* 设置你想要的背景色 */
  color:  rgba(0,0,0,0); /* 设置图标颜色，确保与背景色形成对比 */
  border-radius: 50%; /* 如果需要，可以设置圆角 */
  padding: 4px; /* 添加一些内边距 */
}

.a-breadcrumb {
  display: flex;
  align-content: center;
  width: 100vw;
  height: 5vh;
  background-color: rgb(255, 255, 255);
}

.a-breadcrumb-item {
  display: inline;
  align-content: center;
  padding: 0;
  margin: 0;
  /* 去掉外边距 */
  height: 5vh;
  /* 设置高度为父级高度 */
  padding: 0;
  /* 去掉内边距 */
  margin: 0;
  /* 去掉外边距 */
}

.a-breadcrumb-item+.a-breadcrumb-item {
  margin-left: 0;
  /* 去掉相邻项之间的间距 */
}

.middle-breadcrumb {
  display: inline;
  color: white !important;
  background-color: rgb(146, 177, 182);
  /* 设置中间面包屑项的背景色 */
}
</style>
